<template>
    <div class="patient">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>就诊人管理</span>
                    <el-button type="primary" :icon="User" @click="editUser">添加就诊人</el-button>
                </div>
            </template>
            <div class="visitors" v-if="show">
                <Visitor class="item" @changeScene="changeScene" v-for="(user,index) in userArr" :key="user.id" :user="user" :index="index"/>
            </div>
            <!--添加或修改,条件显示-->
            <div class="form" v-else >
                <el-divider content-position="left">就诊人信息</el-divider>
                <el-form style="width: 60%;margin: 10px auto;">
                    <el-form-item label="用户姓名">
                        <el-input placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-select placeholder="请选择证件类型">
                            <el-option v-for="item in idTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input placeholder="请输入证件号码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户性别">
                        <el-radio-group>
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                </el-form>

                <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
                <el-form style="width: 60%;margin: 10px auto;">
                    <el-form-item label="婚姻状况">
                        <el-radio-group>
                            <el-radio :label="1">已婚</el-radio>
                            <el-radio :label="0">未婚</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="自费/医保">
                        <el-radio-group>
                            <el-radio :label="1">自费</el-radio>
                            <el-radio :label="0">医保</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="当前住址">
                        <el-cascader :props="props" />
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                </el-form>

                <el-divider content-position="left">联系人信息（选填）</el-divider>
                <el-form style="width: 60%;margin: 10px auto;" label-width="85px">
                    <el-form-item label="联系人姓名">
                        <el-input placeholder="请输入联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-select placeholder="请选择证件类型">
                            <el-option v-for="item in idTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input placeholder="请输入联系人证件号码"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input placeholder="请输入联系人手机号码"></el-input>
                    </el-form-item>
                </el-form>

                <div class="footer" style="text-align: center">
                    <el-button type="primary">清空</el-button>
                    <el-button type="primary">提交</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="Patient">
    import {User} from "@element-plus/icons-vue";
    import Visitor from "@/components/Visitor/Visitor.vue";
    import {reqGetUser} from "@/api/hospital";
    import {reqIdType,reqCity} from "@/api/user";
    import type {UserResponseData,UserArr} from "@/api/hospital/type";
    import type {IdTypeResponseData,idTypeList,CityResponseData,CityList} from "@/api/user/type";
    import {ref,onMounted} from "vue";
    import type { CascaderProps } from 'element-plus'

    // 存储全部就诊人信息
    let userArr = ref<UserArr>([]);
    // 控制展示的内容
    const show = ref(true);
    // 存储证件类型
    let idTypeList = ref<idTypeList>([]);

    onMounted(()=>{
        fetchUserData();
        fetchType();
    })
    // 获取就诊人信息封装函数
    const fetchUserData=async ()=>{
        let result:UserResponseData = await reqGetUser();
        if(result.code === 200){
            userArr.value = result.data;
        }
    }
    // 获取证件类型
    const fetchType=async ()=>{
        let res:IdTypeResponseData = await reqIdType();
        if(res.code===200){
            idTypeList.value = res.data;
        }
    }

    // 点击添加就诊人按钮
    const editUser=()=>{
        show.value = false;
    }

    //子组件传递过来的事件
    const changeScene=()=>{
        show.value = false;
    }

    // 级联选择器
    const props:CascaderProps = {
        lazy: true,
        // node选中的节点，resolve将数据注入组件
        async lazyLoad(node:any, resolve) {
            let res:CityResponseData = await reqCity(node.data.id || '86');
            // 整理展示数据
            let showData = res.data.map(item=>{
                return {
                    id:item.id,
                    value:item.value,
                    label:item.name,
                    leaf:!item.hasChildren
                }
            });
            // 注入组件需要展示的数据
            resolve(showData);
        }
    }
</script>

<style scoped>
    .card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .visitors{
        display: flex;
        flex-wrap: wrap;
        .item{
            width: 30%;
            margin: 10px;
        }
    }
</style>